import { Carousel } from "antd";
import "./index.less";
import { useEffect, useState } from "react";
import { schedulingList } from "@/api/SecondmentDictionary";
let num = 0;
const index = () => {
	const onChange = (currentSlide: number) => {
		if (currentSlide + 1 === num) {
			getschedulingList();
		}
	};
	const [schedulingDate, setSchedulingDate] = useState([]);
	const getschedulingList = async () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		const datePicker = year + "-" + month + "-" + day;
		const res = await schedulingList(datePicker);
		num = res.length;
		setSchedulingDate(res);
	};
	useEffect(() => {
		getschedulingList();
	}, []);
	const schedulingFn = () => {
		return (
			<Carousel autoplay afterChange={onChange} dots={false} autoplaySpeed={5000} dotPosition={"right"}>
				{schedulingDate.map(item => {
					return (
						<div className="schedulingSwiper" key={item.specId}>
							<h1>{item.specName}</h1>
							<ul className="main">
								<li className="week">
									<ul className="flex">
										<li className="empty"></li>
										<li>周一</li>
										<li>周二</li>
										<li>周三</li>
										<li>周四</li>
										<li>周五</li>
										<li>周六</li>
										<li>周日</li>
									</ul>
								</li>
								<li>
									<ul className="flex classes">
										<li className="date">
											{item.typeList.map(type => {
												return (
													<p key={type.shiftTypeId}>
														{type.shiftName}:{type.startTime}——{type.endTime}
													</p>
												);
											})}
										</li>
										{item.weekDays.map(week => {
											return (
												<li key={week.week}>
													{week.shiftTypes.map(shift => {
														return (
															<p key={shift.shiftTypeId}>
																{shift.staffList.map(staff => {
																	return (
																		<>
																			<span>{staff.staffName}</span>
																			<br />
																		</>
																	);
																})}
															</p>
														);
													})}
												</li>
											);
										})}
									</ul>
								</li>
							</ul>
						</div>
					);
				})}
			</Carousel>
		);
	};
	return <>{schedulingFn()}</>;
};
export default index;
